<template>
  <div>
    <div class="margin-container-list">
      <div class="top-operate pad-t-15">
        <div>
          <div class="float-l">
            <el-input @keyup.enter.native="handleSearch" v-model="dataListQuery.villageName" placeholder="小区名称" style="width: 300px"></el-input>
            <el-select class="mar-r-3" v-model="provinceCodeSeach" filterable placeholder="请选择省份" @change = "changeProvinceSeach()">
              <el-option v-for="item in userProvinceList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
              </el-option>
            </el-select>
            <el-select class="mar-r-3" v-model="cityCodeSeach" filterable placeholder="请选择城市" @change = "changeCitySeach()">
              <el-option v-for="item in useCityList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
              </el-option>
            </el-select>
            <el-select v-model="districtCodeSeach" filterable placeholder="请选择区县" @change = "changeDistrictSeach()">
              <el-option v-for="item in useDistrictList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
              </el-option>
            </el-select>
            <el-date-picker v-model="datePicker"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
            </el-date-picker>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain="" @click="resetSearch">重置</el-button>
          </div>
          <br>
          <div class="pad-t-10">
            <el-button @click="handleCreate" type="primary">新增小区</el-button>
          </div>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table :data="dataList" @selection-change="handleSelectionChange" v-loading="listLoading"
                  element-loading-text="加载中" style="width: 100%">
          <el-table-column width="55px" type="selection"></el-table-column>
          <el-table-column min-width="240px" label="小区">
            <template slot-scope="scope">
              <span>【{{ scope.row.provinceName + scope.row.cityName + scope.row.districtName }}】 {{ scope.row.villageName }}</span>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="创建时间" prop="createTime" ></el-table-column>
          <el-table-column width="140px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="handleUpdate(scope.row)">编辑</el-button>
              <!--<el-button type="danger" @click="deleteVillage(scope.row)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="dataListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="dataListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 小区编辑 -->
    <el-dialog title="小区编辑" :visible.sync="formVisible" :close-on-press-escape="true" width="650px">
      <el-form :model="entity" label-position="right" label-width="100px" style='width: 500px; margin-left:50px;'>
        <el-form-item label="省市区">
          <el-row class="flex">
            <el-select class="mar-r-3" v-model="provinceCode" filterable placeholder="请选择省份" @change = "changeProvince()">
              <el-option v-for="item in provinceList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
              </el-option>
            </el-select>
            <el-select class="mar-r-3" v-model="cityCode" filterable placeholder="请选择城市" @change = "changeCity()">
              <el-option v-for="item in cityList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
              </el-option>
            </el-select>
            <el-select v-model="districtCode" filterable placeholder="请选择区县">
              <el-option v-for="item in districtList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
              </el-option>
            </el-select>
          </el-row>
        </el-form-item>
        <el-form-item label="小区名称">
          <div><el-input v-model="entity.villageName" placeholder="请输入小区名称"></el-input></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisible = false">取消</el-button>
        <el-button type="primary" @click="button_ok">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { pagingVillage, saveVillage, deleteVillage } from '@/api/user/village'
  import { listProvince, listCity, listDistrict } from '@/api/area/area'

  export default {
    data() {
      return {
        total: null,
        dataList: [],
        listLoading: true,
        formVisible: false,
        entity: {},
        dataListQuery: {
          villageName: '',
          enterpriseId: this.getEnterpriseId(),
          startTime: '',
          endTime: '',
          provinceCode: '',
          cityCode: '',
          districtCode: '',
          currentPage: 1,
          size: 10
        },
        datePicker: [],
        provinceList: [],
        cityList: [],
        districtList: [],
        provinceCode: '',
        cityCode: '',
        districtCode: '',
        userProvinceList: [],
        useCityList: [],
        useDistrictList: [],
        provinceCodeSeach: '',
        cityCodeSeach: '',
        districtCodeSeach: ''
      }
    },
    // 初始化页面
    created() {
      this.listLoading = false
      this.initData()
    },
    mounted() {
    },
    methods: {
      initData() {
        this.listLoading = true
        const datePicker = this.datePicker
        if (this.$utils.isExist(datePicker) && datePicker.length > 0) {
          this.dataListQuery.startTime = datePicker[0]
          this.dataListQuery.endTime = datePicker[1]
        } else {
          this.dataListQuery.startTime = ''
          this.dataListQuery.endTime = ''
        }
        this.dataListQuery.provinceCode = this.provinceCodeSeach
        this.dataListQuery.cityCode = this.cityCodeSeach
        this.dataListQuery.districtCode = this.districtCodeSeach
        pagingVillage(this.dataListQuery).then(response => {
          this.dataList = response.data.records
          this.total = response.data.total
          this.listLoading = false
        })
        listProvince().then(response => {
          this.userProvinceList = response.data
        })
      },
      resetSearch() {
        this.dataListQuery = {
          villageName: '',
          enterpriseId: this.getEnterpriseId(),
          startTime: '',
          endTime: '',
          provinceCode: '',
          cityCode: '',
          districtCode: '',
          currentPage: 1,
          size: 10
        }
        this.datePicker = []
        this.provinceCodeSeach = ''
        this.cityCodeSeach = ''
        this.districtCodeSeach = ''
        this.initData()
      },
      // 添加
      handleCreate() {
        this.entity = {}
        listProvince().then(response => {
          this.provinceList = response.data
        })
        this.formVisible = true
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.dataListQuery.size = val
        this.initData()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.dataListQuery.currentPage = val
        this.initData()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      statusClick() {
        this.dataListQuery.villageName = ''
        this.dataListQuery.datePicker = []
        this.initData()
      },
      // 查询
      handleSearch() {
        this.dataListQuery.currentPage = 1
        this.initData()
      },
      deleteVillage(row) {
        this.$confirm('此操作将删除该数据，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteVillage(row.villageId).then(response => {
            if (response.isError) return
            this.initData()
          })
        }).catch(() => {})
      },
      button_ok() {
        if (!this.provinceCode) {
          this.$message({ type: 'error', message: '请选择省份!' })
          return
        }
        if (!this.cityCode) {
          this.$message({ type: 'error', message: '请选择城市!' })
          return
        }
        if (!this.districtCode) {
          this.$message({ type: 'error', message: '请选择地区!' })
          return
        }
        if (!this.entity.villageName) {
          this.$message({ type: 'error', message: '请输入小区名称!' })
          return
        }
        this.entity.provinceCode = this.provinceCode
        this.entity.cityCode = this.cityCode
        this.entity.districtCode = this.districtCode
        this.entity.enterpriseId = this.getEnterpriseId()
        saveVillage(this.entity).then(response => {
          if (response.isError) return
          this.formVisible = false
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.initData()
        })
      },
      // 编辑
      handleUpdate(row) {
        this.provinceList = []
        this.cityList = []
        this.districtList = []
        // 清除赋值
        const obj = JSON.parse(JSON.stringify(row))
        this.entity = obj
        this.provinceCode = row.provinceCode
        this.cityCode = row.cityCode
        this.districtCode = row.districtCode
        listProvince().then(response => {
          this.provinceList = response.data
        })
        listCity(this.provinceCode).then(response => {
          this.cityList = response.data
        })
        listDistrict(this.cityCode).then(response => {
          this.districtList = response.data
        })
        this.formVisible = true
      },
      changeProvince() {
        this.cityCode = ''
        this.districtCode = ''
        listCity(this.provinceCode).then(response => {
          this.cityList = response.data
        })
      },
      changeCity() {
        listDistrict(this.cityCode).then(response => {
          this.districtList = response.data
        })
        this.districtCode = ''
      },
      changeProvinceSeach() {
        listCity(this.provinceCodeSeach).then(response => {
          this.useCityList = response.data
        })
        this.cityCodeSeach = ''
      },
      changeCitySeach() {
        listDistrict(this.cityCodeSeach).then(response => {
          this.useDistrictList = response.data
        })
        this.districtCodeSeach = ''
      },
      changeDistrictSeach() {
      }
    }
  }
</script>

<style lang="less" scoped>
  .mission-type {
    padding: 35px 38px;
    min-width: 150px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    margin: 25px 40px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
  }
  .flex-cag-box{
    padding: 0px 0px 20px 70px;
    .mission-type:nth-child(4n){
      margin-right: 0px;
    }
  }
  .next-step-btn{
    padding: 13px 35px;
    font-size: 18px;
  }

  .sel-mission-type {
    background-color: #409eff;
    color: #fff;
  }

  .budget-el-select {
    padding-top: 10px;
    padding-left: 50px;
  }
</style>
